import React from 'react';
import {
View,
ScrollView,
TouchableOpacity,
Text
} from 'react-native';

import BasePage from '../common/BasePage';
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow';
import Config from '../../config';
import HeartEapListView from "./HeartEapListView";
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';
import CommonAvatarView from '../common/CommonAvatarView';

var BUTTONS = [
  {icon:require("../../../resource/images/heart/eap/huodong.png"),key:"heart_enter_world", name:"最新活动", page:Config.pages.heart_eap_list_new, souorce:{uri:""}},
  {icon:require("../../../resource/images/heart/eap/xin.png"),key:"heart_eap_main", name:"精彩回顾", page:Config.pages.heart_eap_list_review, souorce:{uri:""}},
   {icon:require("../../../resource/images/heart/eap/jion.png"),key:"zhp_main", name:"加入志愿者", page:Config.pages.heart_volunteer, souorce:{uri:""}}
];

export default class HeartEAPMainPage extends BasePage {
  constructor(props) {
    super(props);
    this.height = SizeUtils.getWindowSize().height - Config.paddingTop;
    this._viewPager = null;
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          paddingTop:Config.paddingTop,backgroundColor:'#fff',
          height:SizeUtils.getWindowSize().height}}>
        {this._renderEap()}
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderPageButtons() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row", justifyContent:"space-around",}}>
        {
          BUTTONS.map(
            (data, index) => {
              return this._renderItem(data, index);
            }
          )
        }
      </View>
    )
  }
  _renderItem(data, index) {
    return(
      <TouchableOpacity key={index} style={{alignItems:"center",
          justifyContent:"center",
          padding:SizeUtils.translateDesignHeightToCode(30)
          }}
        onPress={() => this._onPressItem(data)}>
        <TImage source={data.icon}
              style={{width:84, height:84}}/>
        <Text style={[CommonStyles.secondaryText,{marginTop:SizeUtils.translateDesignHeightToCode(-4),
          fontSize:SizeUtils.translateFontSizeToCode(25)}]}>
          {data.name}
        </Text>

      </TouchableOpacity>
    )
  }
  _onPressItem(data) {
    this.gotoPage(data.page)
  }
  _renderShowImage() {
    return (
        <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginTop: SizeUtils.translateDesignHeightToCode(40),}}>
        <TImage source={require("../../../resource/images/heart/eap/zhiyuanzhe.jpg")}
         style={{width:670, height:340}}/>
        </View>
    )
  }

  _onRenderHeader(){
    return (<View >
      {/* {this._renderShowImage()} */}
      {this._renderSmallPager()}
      {this._renderPageButtons()}
      <View style={{backgroundColor:'#f2f2f2',height:10}}/>
    </View>)
  }

  _renderSmallPager() {
    return (
    <View style={{
        }}>
        <CommonViewPagerMultiShow ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.HEART_EAP}/>
      </View>
    )
  }
  _renderEap(){
    return (
      <HeartEapListView style={{marginTop: SizeUtils.translateDesignHeightToCode(20),height:this.height}}
            noEmpty = {true} requestData={this._requestData.bind(this)}
            requestType={1} onRenderHeader={this._onRenderHeader.bind(this)}>
          </HeartEapListView>
    )
  }

  _requestData() {
    this._viewPager.doRefresh();
  }
}
